<template>
  <Dialog
  :title = "dialogConfig.title"
  :buttons ="dialogConfig.buttons"
  width="400px"
  :showCancel="false"
  :show="dialogConfig.show"
  @close="dialogConfig.show =false"
  >

  <div class="search-panel">
    <el-input clearable placeholder="请输入联系人ID搜索" v-model="userId" :prefix-icon="Search" :maxlength="12"></el-input>
    <el-button type="primary" class="search-btn" @click="search">搜索</el-button>
  </div>

   <div class="user-info" v-if="userInfo && Object.keys(userInfo).length > 0">
        <Avatar :avatar ="userInfo?.userId"></Avatar>
        <div class="nick-name">{{userInfo?.nickName}}</div>
        <div class="tips"></div>
        <span v-if="userInfo.status == -1">自己</span>
        <span v-if="userInfo.status == 1">已是联系人</span>
        <span v-if="userInfo.status == 3">您被对方拉黑</span>
        <span v-if="userInfo.status == 0">已申请待处理</span>
        <span v-if="userInfo.status == null">
            <el-button type="primary" size="mall" @click="contactApply">申请好友</el-button>
        </span>
   </div>
   <NoData v-if="userInfo == null" msg="用户不存在"></NoData>

  </Dialog>

</template>



<script setup>
import {Search} from '@element-plus/icons-vue'
import {ref,reactive, getCurrentInstance,nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const { proxy } = getCurrentInstance()
const router = useRouter()
const route = useRoute()


const dialogConfig = ref({
  show: false,
  title:'添加联系人',
})


const userId =ref({})

const userInfo= ref({})

const search = async()=>{
   let result = await proxy.Request({
     url: proxy.Api.searchContact,
     params:{
      userId: userId.value
     }
  })
  if(!result){
    return;
  }
  userInfo.value = result.data
}

const emit = defineEmits(['reload'])

const contactApply = async()=>{
        let result = await proxy.Request({
           url: proxy.Api.applyContact,
           params:{
            receiveUserId:userInfo.value.userId
           }
        })
        if(!result){
          return;
        }
        dialogConfig.value.show = false;
        if(result.data == 0){
          proxy.Message.success('申请成功，等待对方处理')
        }else{
           proxy.Message.success('添加好友成功')
           emit("reload")
        }
}

const show = async()=>{
  console.log('applyContact show is frunning')
   dialogConfig.value.show =true;
   console.log('applyContact show is ',dialogConfig.value.show)
   await nextTick();
   userId.value = null;
   userInfo.value ={};
}

defineExpose({
  show,
})

</script>



<style lang="scss" scoped>

.search-panel{
  display: flex;
  align-items: center;
  justify-content: space-between;
  .search-btn{
    margin-left: 5px;
  }
}


.user-info{
  display: flex;
  align-items: center;
  margin-top: 10px;
  .nick-name{
    margin-left: 5px;
    flex: 1;
  }
  .tips{
    font-size: 12px;
    color: #7b7b7b;
  }
}

.no-search{
  line-height: 40px;
  text-align: center;
}


</style>
